<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    Long resid = Long.parseLong(request.getParameter("id"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>linux综合性能页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<%@ include file="../include/common.jsp"%>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>

<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/Xslider.js"></script>

 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTLine.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTMemLine.js"></script>		
 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTLED.js"></script>		
 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTMemLed.js"></script>		



<script type="text/javascript">

    
	//初始化CPU列表
	var diskColChart;
	var  cpuChart;
	function initCpuList() {
		if(typeof cpuChart == undefined || cpuChart == null){
			 cpuChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","cpuChart1", "100%", "100%", "0", "1" );
	         diskColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","diskColChart1", "100%", "100%", "0", "1" );
		   }
		
		//磁盘指标区线图
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				propIds:'110101000000008,110101000000012'
			},
			success : function(data) {
				diskColChart.setJSONData(data);
				diskColChart.render("diskColChart");
			}
		});
		
		//cpu指曲线图
		$.ajax({
			url : 'real-time!childResList.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1201010400000'
			},
			success : function(data) { //
				$('#videolistwraper > .videolist ul ').remove('li');
				$.each(data.res,function(i,index){
					$('#videolistwraper > .videolist ul ').append('	<li><span id='+index.id+' class="listspan">'+index.name+'</span> </li>');
				});		
				//最多显示三个   一次移动两个   不可循环   垂直滚动
				$("#videolistwraper").Xslider({
					unitdisplayed : 4,
					numtoMove : 2,
					//loop : "cycle",
					dir : "V"
				});
				//给每一列加点击操作
				$('#videolistwraper .videolist ul li').click(function(){
					$(this).addClass('liselected').siblings().removeClass('liselected');
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120101000000001,120101000000002,120101000000003,120101000000004'
						},
						success : function(dataset) {
							cpuChart.setJSONData(dataset);
							cpuChart.render("cpuChartDiv");
						}
					});
				});
				//触发第一个
				$('#videolistwraper .videolist ul li :first').click();
			}
		});
	}
	
	
    //网络接口初始化
    var netFlowColChart;
    var netByteColChart;
    function initNetwork() {
		if(typeof netFlowColChart == undefined || netFlowColChart == null){
			netFlowColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","netFlowColChart1", "100%", "100%", "0", "1" );
			netByteColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","netByteColChart1", "100%", "100%", "0", "1" );
		}
		$.ajax({
			url : 'real-time!childResList.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1201060400000'
			},
			success : function(data) {
				$('#netlistwraper > .videolist ul ').remove('li');
				$.each(data.res,function(i,index){
					$('#netlistwraper > .videolist ul ').append('	<li><span id='+index.id+' class="listspan">'+index.name+'</span> </li>');
				});	
				$("#netlistwraper").Xslider({
					unitdisplayed : 4,
					numtoMove : 2,
					loop : "cycle",
					dir : "V"
				});
				
				$('#netlistwraper .videolist ul li').click(function(){
					$(this).addClass('liselected').siblings().removeClass('liselected');
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120106000000005,120106000000001,120106000000002,120106000000004'
						},
						success : function(dataset) {
							netFlowColChart.setJSONData(dataset);
							netFlowColChart.render("netFlowColDiv");
						}
					});
					
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120106000000006,120106000000007'
						},
						success : function(dataset) {
							netByteColChart.setJSONData(dataset);
							netByteColChart.render("netByteColDiv");
						}
					});
				});
				$('#netlistwraper .videolist ul li :first').click();
			}
		});
				
		//
		
	}
    

	//TCP初始化
	var tcpChart;
	var swapChart;
	function initTCP() {
		if(typeof(tcpChart)=='undefined'){
			tcpChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","tcpChart1", "100%", "100%", "0", "1" );
			swapChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","swapChart11", "100%", "100%", "0", "1" );
		}
		
		//连接数曲线
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				propIds:'110101000000017,110101000000018,110101000000001'
				
			},
			success : function(data) {
				tcpChart.setJSONData(data);
				tcpChart.render("tcpChartDiv");
			}
		});
		//交换分区
		$.ajax({
			url : 'real-time!get2LineChart.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1201030400000',
				propIds:'120103000000002'
			},
			success : function(data) {
				swapChart.setJSONData(data);
				swapChart.render("swapDiv");
			}
		});
	}
	
	
	
	var uptimeColChart;
	var fsColChartc;
	function initBaseInfo(){
	        //平均负载柱图
			$.ajax({
				url : 'real-time!get2ColumnPropChart.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'110101000000023,110101000000024,110101000000025',
					namealias:'一分钟,五分钟,十五分钟'
				},
				success : function(data) {
					if(typeof uptimeColChart == undefined || uptimeColChart == null){
						 uptimeColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf","uptimeColChart11", "100%", "130", "0", "1" );
					}
					uptimeColChart.setJSONData(data);
					uptimeColChart.render("uptimeDiv");
				}
			});
			
			//基本信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'attr_110101000000003,attr_110101000000002,prop_110101000000022,attr_110100000000002,prop_110101000000002,prop_110100000000006,prop_110101000000017,prop_110101000000003,prop_110101000000020'
				},
				success : function(data) {
					$('#attr_110101000000003').text(data.attr_110101000000003); //OS版本
					$('#attr_110101000000002').text(data.attr_110101000000002); //主机型号
					$('#prop_110101000000002').text(data.prop_110101000000002); //登录用户数
					$('#attr_110100000000002').text(data.attr_110100000000002); //CPU核数
					$('#prop_110101000000022').text(data.prop_110101000000022); //登录用户数
					$('#prop_110100000000006').text(data.prop_110100000000006); //丢包率
					$('#prop_110101000000017').text(data.prop_110101000000017); //打开连接数
					$('#prop_110101000000003').text(data.prop_110101000000003); //进程总数
					$('#prop_110101000000020').text(data.prop_110101000000020); //主机运行时间
					$('#resIp').text(data.ip);
				}
			});
			
			//文件系统
			if(typeof fsColChartc == undefined || fsColChartc == null){
				fsColChartc =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf","fsColChart11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChart.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1201050400000',
					propIds:'120105000000003',
					top:'5'
				},
				success : function(data) {
					fsColChartc.setJSONData(data);
					fsColChartc.render("fsColChart");
				}
			});
	}
	
	
	var cpuVRealLed;
	var  cpuHisLine;
	var  memoryVRealLed	;
	var  memoryHisLine;
	function initRealTimeChart(){
		
		if(typeof cpuVRealLed ==undefined || cpuVRealLed == null){
			cpuVRealLed =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", "cpuVled11", "100%", "130", "0", "1" );
		    cpuVRealLed.setXMLData(RTString);
	        cpuVRealLed.render("cpuVReal");
	        
	        //CPU各指标值柱图
	         cpuHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/RealTimeLine.swf", "cpuHisLine11", "300", "130", "0", "1" );
	        cpuHisLine.setXMLData(RTCpuHisString);
	        cpuHisLine.render("cpuHis");
	        
		    //内存LED图
	         memoryVRealLed =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", "messmoryVled11", "100%", "130", "0", "1" );
	        memoryVRealLed.setXMLData(RTMemString);
	        memoryVRealLed.render("memoryVReal");
	        
	       //内存实时线图
	       	 memoryHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/RealTimeLine.swf", "memoryHisLine11", "300", "130", "0", "1" );
	       	memoryHisLine.setXMLData(RTMemHisString);
	       	memoryHisLine.render("memoryhis");
		
		}
     
	}
	
	function freshMemData(){
		var cpuVLEDV = getChartFromId("cpuVled11");
		var cpuHisLineV = getChartFromId("cpuHisLine11");
		var memHisLineV = getChartFromId("memoryHisLine11");
		var memVLEDV = getChartFromId("messmoryVled11");
        var currDate = new Date();
        var label= currDate.getHours() + ":" + currDate.getMinutes() + ":" + currDate.getSeconds();
        
        //cpu
        $.ajax({
			url : 'real-time!getRealTimeVal.action', 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				propid:'110100000000001,110100000000002,110100000000003'
			},
			success : function(data) {
				var strData = "&label=" + label + "&value=" + data;
				cpuVLEDV.feedData("&value=" + data);
				cpuHisLineV.feedData(strData);
			}
		});
    	
        
        //内存
		 $.ajax({
				url : 'real-time!getRealTimeVal.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propid:'1201020100000_120102000000005'
				},
				success : function(data) {
					var strData = "&label=" + label + "&value=" + data;
					memHisLineV.feedData(strData);
					memVLEDV.feedData("&value=" + data);
				}
			  });
		 return false;
	}
	
	$(document).ready(function() {
			initBaseInfo();
			initRealTimeChart();
			initCpuList();
			initTCP();
			initNetwork();
	
		//CPU 内存 每10S刷新一次
		setInterval('freshMemData()',5000);
		setInterval('initBaseInfo()',60000);
		
				
	});
</script>

</head>
<body>

	<div class="column">
		<div class="col-main">
			<!--基本信息-->
			<div class="col-l-extra h-400">
			<h2 class="title-h2 m-0">基本信息</h2>
			<ul class="col-l-ul">
					<li><span class="col-l-ul-l" >操作系统:</span><span 
								class="col-l-ul-r"><img src="${pageContext.request.contextPath}/style/default/bsm/perf/images/solaris24_24.png">&nbsp;&nbsp;Solaris</span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">IP:</span><span id="resIp"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">OS版本:</span><span id="attr_110101000000003"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">主机型号:</span><span id="attr_110101000000002"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">CPU总数:</span><span id="attr_110100000000002"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">登录用户数:</span><span id="prop_110101000000002"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">丢包率(%):</span><span id="prop_110100000000006"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">打开连接数:</span><span id="prop_110101000000017"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">进程总数:</span><span id="prop_110101000000003"
						class="col-l-ul-r"></span>
					</li>
					<li><span class="col-l-ul-l" class="baseinfo">主机运行时间:</span><span id="prop_110101000000020"
						class="col-l-ul-r"></span>
					</li>
			</ul>
			</div>
			<!--@end基本信息-->
			<div class="col-r-main">
				<div class="col-v-rate-extra" >
				<h2 class="title-h2 m-0">平均负载</h2>
					<div id="uptimeDiv"></div>
				</div>
				<!--@end基本信息-->
				<div class="col-v-rate-extra f-r">
				<h2 class="title-h2 m-0">CPU使用率</h2>
				  <div id="cpuVReal" style="width:80px;height:180px; float:left;overflow:hidden;clear:none;  margin-left:1px;"></div>
				   <div id="cpuHis"  style="width:180px;height:180px;float:left;clear:none; background:#eee;"></div>
			    </div>
			    
			     <div class="col-v-rate-extra">
		            <h2 class="title-h2 m-0"> 文件系统使用率 TOP5</h2>
			       <div id="fsColChart"></div>
			    </div>
			    
				<div class="col-v-rate-extra f-r">
				<h2 class="title-h2 m-0"> 内存使用率</h2>
				   <div id="memoryVReal" style="width:80px;height:180px; float:left;overflow:hidden;clear:none; background:#ccc; margin-left:1px;"></div>
				   <div id="memoryhis"  style="width:180px;height:180px;float:left;clear:none; background:#eee;"></div>
			    </div>
		 </div>   
	  </div>
	</div>

			<div class="column">
				<div class="col-main" >
					<div class="col-net-main " >
						<h2 class="title-h2 m-0">CPU子资源 [当天趋势图]-[系统调用率,平均空闲率,等待IO率,使用率]</h2>
							<div class="col-l-extra w-15" >
							<ul class="col-l-ul">
								<div id="videolistwraper">
								 <a class="abtn aright" href="#down"></a>
									<div class="videolist">
										<ul>
										</ul>
									</div>
									<a class="abtn aleft" href="#up" ></a>
								</div>
							</ul>
						</div>
					 <div class="col-r-main h-150 w-80" id="cpuChartDiv" ></div>
					</div>
					<div class="col-net-main f-r w-48" >
						<h2 class="title-h2 m-0">磁盘 [当天趋势图]-[磁盘读出流量总和,磁盘写入流量总和]</h2>
						<div id="diskColChart" class= "col-r-main h-150 w-100"></div>
					</div>
				</div>
	     </div>
		
		 	<div class="column">
<!--标题--> 
				<div class="col-main" >
<!--图表-->
					<div class="col-net-main " >
						<h2 class="title-h2 m-0">TCP连接 [当天趋势图]-[打开连接数,Time_Wait,Close_Wait]</h2>
						<div id="tcpChartDiv"></div>
					</div>
					
					<div class="col-net-main f-r w-48 " >
						<h2 class="title-h2 m-0">交换分区 [当天趋势图]-[交换分区使用率]</h2>
						<div id="swapDiv"></div>
					</div>
<!--@end图表-->
				</div>
		 	</div>	
		 	
		 		<div class="column b-1">
					<h2 class="title-h2 m-0">网络接口子资源 [当天趋势图]-[输入流量,输入出错流量,输出流量,输出出错流量]-[接收Bytes,发送Bytes]</h2>
					    <div class="col-l-extra w-7" >
							<ul class="col-l-ul">
								<div id="netlistwraper">
								 <a class="abtn aright" href="#down"></a>
									<div class="videolist">
										<ul>
										</ul>
									</div>
									<a class="abtn aleft" href="#up" ></a>
								</div>
							</ul>
						</div>
						<div class="col-net-main p-40">
						    <div id="netFlowColDiv"></div>
					    </div>
						<div class="col-net-main p-40">
						    <div id="netByteColDiv"></div>
					    </div>
			 </div>
			 
			 <div class="column" style="width:100%;height:5px;"></div>
</body>